<template>
  <div>
    <a-modal :visible="showUpdateVisible" title="修改密码" @ok="updatePassword" @cancel="cancelEditPwd">
      <a-form :model="editUserPassword"
              name="basic"
              :label-col="{ span: 8 }"
              :wrapper-col="{ span: 16 }"
              autocomplete="off">
        <a-form-item
            label="原密码"
            name="oldPassword"
            :rules="[{ required: true }]">
          <a-input :maxlength="36" v-model:value="editUserPassword.oldPassword"/>
        </a-form-item>
        <a-form-item
            label="新密码"
            name="newPassword"
            :rules="[{ required: true }]">
          <a-input-password :maxlength="36" v-model:value="editUserPassword.newPassword"/>
        </a-form-item>
        <a-form-item
            label="确认新的密码"
            name="confirmPassword"
            :rules="[{ required: true}]">
          <a-input-password :maxlength="36" v-model:value="editUserPassword.confirmPassword"/>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
import {reactive} from "vue";
import {useStore} from "vuex";
import {message} from "ant-design-vue";

export default {
  name: "editUserPassword",
  props: ['showUpdateVisible'],
  methods: {
     updatePassword() {
       if (this.editUserPassword.newPassword!=this.editUserPassword.confirmPassword){
         message.error("新密码和确认密码不一致")
         return false
       }
       this.checkOldPassword()
      this.$emit('closeUpdatePassword')
    },
    cancelEditPwd() {
      this.$emit('closeUpdatePassword')
    },
    // http://xiaoyuanqiang.com/static/xiaoyuanqiang/images/psc.jfif
    checkOldPassword() {
      //发请求校验当前账号密码
      this.$httpGet(`/xy/user/checkPassword?oldPassword=${this.editUserPassword.oldPassword}`).then(res => {
        if (res.data.code == 500) {
          message.warn('原密码输入错误')
          return false
        }
        //发送请求修改密码
        this.$httpGet(`xy/user/updatePassword?newPassword=${this.editUserPassword.newPassword}`).then(res => {

        })
      })

    }
  },
  setup() {
    const store = useStore();
    const editUserPassword = reactive({
      oldPassword: '',
      newPassword: '',
      confirmPassword: ''
    })
    return {
      editUserPassword

    }
  }
}
</script>

<style scoped>

</style>